<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>驾照查分</title>
    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">-->
    <link rel="stylesheet" href="../../../resource/css/index.css">

</head>
<body>
<div id="app">
<template>
<div>
  <div class="bluebg">
    <div class="scoreitem">
      <h4><span v-text="score"></span><small>分</small></h4>
      <p class="des">本周期累计扣分</p>
    </div>
  </div>

  <van-cell-group>
    <van-cell title="驾驶证号"><van-field class="textinput" v-model="driveNum" input-align="right" clearable placeholder="请输入驾驶证号" /></van-cell>
    <van-cell title="档案编号"><van-field class="textinput" v-model="archives" input-align="right" clearable placeholder="请输入档案编号" /></van-cell>
    <van-cell title="初次领证日期" @click="choseData"><van-field class="textinput" v-model="currentDate" input-align="right" clearable placeholder="选填" /></van-cell>
  </van-cell-group>

  <div class="bt"><van-button size="large" type="info" @click="query">开始查分</van-button></div>

  <van-popup class="province" v-model="show0" position="bottom" :overlay="false">
      <van-datetime-picker v-model="currentDate" type="date" @change="Change" @cancel="Cancel"  @confirm="Confirm"/>
  </van-popup>
</div>  
</template>
</div>
<!--<script src="http://vuejs.org/js/vue.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>-->
<!--<script src='http://app.lxh.magcloud.cc/public/static/dest/js/libs/magjs-x.js'></script>-->
<!--<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>-->
    <script src="../../../resource/js/vue.min.js"></script>
    <script src="../../../resource/js/vant.min.js"></script>
    <script src="../../../resource/js/magjs-x.js"></script>
    <script src="../../../resource/js/vue-router.js"></script>
    <!--<script src="../../../resource/js/axios.min.js"></script>-->
    <script src="../../../resource/js/qs.min.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
    title: '驾照查分',
    score: '0',
    driveNum: '',
    archives: '',
    data: '',
    tiptxt: '',
    showtip: false,
    show0: false,
    currentDate: '选填',
    token:''
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了    
    // let date = new Date()
    // this.currentDate = date.toLocaleDateString()
    mag.toLogin(function(rs) {
        this.token = rs.token
        localStorage.setItem('token', rs.token)
    })
  },
  methods: {

  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    // '$route': 'fetchData'
  },
  methods: {
    choseData () {
      this.show0 = true
    },
    Change (e) {
      // console.log(e)
    },
    Confirm () {
      this.show0 = false
    },
    Cancel () {
      this.show0 = false      
    },
    query () {
      let that = this
      let postparams = {
        token: localStorage.getItem('token'),
        driveNum: this.driveNum,
      }
      axios.post('/Rule/getUserDriverLicenseScore', postparams).then(({data}) => {
        // console.log(data.data)
        if (data.code === 200) {
          that.score = 12 - data.data.score
        } else {
        }
        this.$toast({
          message: data.msg,
        })
      })
    }
  }
})
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.van-field__control{
  font-size: 14px;
}
.van-button--large{
  height: 38px;
  line-height: 36px;
}
.van-button--info{
  border-color: #4F91F2;
  background-color: #4F91F2
}
.bt{
  margin: 10px auto;
  text-align: center;
  padding: 0 15px;
}
.white{
  fill: #fff;
}
.blue {
  color: #4F91F2;
}
.text {
    border: none;
    background: transparent;
    color: #333;
}
.bluebg{
  background-color: #4ABDFC;
  background-color: linear-gradient(top, #4F91F2, #4ABDFC);
  padding: 20px 0;
}
.scoreitem{
  width: 140px;
  height: 140px;
  border: 3px #fff solid;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 30px 0;
  text-align: center;
  margin: 25px auto;
  color: #fff;
}
.scoreitem h4{
  font-size: 32px;
  font-weight: normal;
  margin: 0;
}
.scoreitem h4>small{
  font-size: 40%;
}
.scoreitem .des{
  font-size: 12px;
}
.text:after {
    border: none;
}
.thumbnail{
  height: 29px;
}
.textinput{
  border: none;
  background: transparent;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  text-align: right;
  color: #808080;
  padding: 0 10px; 
}

.upload {
  width: 100%;
  height: 100%;
  background: transparent;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}
</style>
</body>
</html>